<template>
  <div class="page-grey">
    <div class="top">
      <span @click="$router.back()">
        <svg-icon icon-class="back" class="icon" />
      </span>
      <span>解绑</span>
      <span class="link">添加银行卡</span>
    </div>
    <div class="card">
      <p class="num">卡号<br /><em>**** **** **** 0299</em></p>
      <div class="info">
        <span>发行银行<br /><em>中国建设银行</em></span>
        <span>储蓄卡</span>
      </div>
    </div>
    <div class="big-btn" @click="remove">解除绑定</div>
    <!-- 弹出层 -->
    <van-popup v-model="show" position="bottom" class="popup">
      <h3 class="title">确认解除</h3>
      <p class="pmt">解除绑定后将无法继续使用该卡支付功能</p>
      <div class="big-btn" @click="submit">请确定解除绑定</div>
      <div class="big-btn cancel" @click="cancel">取消解除</div>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    remove() {
      this.show = true;
    },
    cancel() {
      this.show = false;
    },
    submit() {
      this.$toast.success("解绑成功");
      this.$router.back();
      this.show = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.card {
  width: 362px;
  max-width: 90%;
  height: 142px;
  background: url("../../assets/images/jh_bg.png") no-repeat center center;
  background-size: 100% 100%;
  margin: 20px auto 50px;
  position: relative;
  color: #cfcfcf;
  font-size: 12px;
  .num {
    position: absolute;
    left: 10%;
    top: 10%;
  }
  .info {
    position: absolute;
    width: 80%;
    left: 10%;
    top: 55%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
  em {
    font-style: normal;
    color: #fff;
    font-size: 105%;
  }
}
.big-btn:not(.cancel) {
  margin-bottom: 0;
}
</style>
